<template>
  <div class="update-name">
    <!-- 导航栏 -->
    <van-nav-bar
        title="昵称"
        left-text="取消"
        right-text="完成"
        @click-left="$emit('close')"
        @click-right="onConfirm"
    />

    <!-- 输入框 -->
    <div class="field-wrap">
        <van-field
            v-model.trim="localName"
            rows="2"
            autosize
            type="textarea"
            maxlength="7"
            placeholder="请输入昵称"
            show-word-limit
        />        
    </div>

  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'

export default {
    name: 'UpdateName',
    data() {
        return {
            localName:this.value  //输入框内容
        }
    },
    props: {
        value: {
            type: String,
            required:true
        }
    },
    methods: {
        async onConfirm() {
            this.$toast.loading({
                message: '保存中...',
                duration: 0, // 持续展示 toast
                forbidClick: true // 禁用背景点击
            })
            try {
                const localName = this.localName
                if (!localName.length) {
                    this.$toast('昵称不能为空')              
                    return
                } 

                await updateUserProfile({
                    name: localName,
                    // gender, //性别
                    // birthday,
                    // intro //个人介绍
                }) 

                // 更新视图
                this.$emit('input',localName)
                // 关闭弹出层
                this.$emit('close')
                // 提示成功
                this.$toast.success('昵称修改成功')              
            } catch (err) {
                this.$toast.fail('更新失败')
            }
        }
    }
}
</script>

<style scoped lang="less">
.update-name{
    .field-wrap{
        padding: 20px;
    }
}
    
</style>